<template>
    <view :style="objColor">
        <view class="site_tag">
            <view 
                @tap="checkTag1(item, index)"
                class="tag_item"
                :class="item.isShow ? 'tag_item_sel' : 'tag_item'"
                :data-key="item.value"
                v-for="(item, index) in indexSearchConditionData.isFeatured"
                :key="item.name"
            >
                <view class="v_item">
                    <image
                        class="v_icon"
                        src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/icon-jingxuanzhanchang.png"
                        mode="scaleToFill"
                    />
                    <text class="v_text">
                        {{ item.name }}
                    </text>
                </view>
            </view>

            <view 
                @tap="checkTag2(item, index)"
                class="tag_item"
                :class="item.isShow ? 'tag_item_sel' : 'tag_item'"
                :data-key="item.value"
                v-for="(item, index) in indexSearchConditionData.serviceFacilities"
                :key="item.name"
            >
                <view class="v_item">
                    <text class="v_text">
                        {{ item.name }}
                    </text>
                </view>
            </view>

            <view 
                @tap="checkTag3(item, index)"
                class="tag_item"
                :class="item.isShow ? 'tag_item_sel' : 'tag_item'"
                :data-key="item.value"
                v-for="(item, index) in indexSearchConditionData.gunType"
                :key="item.name"
            >
                <view class="v_item">
                    <text class="v_text">
                        {{ item.name }}
                    </text>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
	import { indexSearchCondition, } from '@/api/mobileUpdate';

	export default {
		data() {
			return {
                memberQueryPreferenceDto: {},
                indexSearchConditionData: {},
            };
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
            initDataBase() {
                let siteFiltering = uni.getStorageSync('siteFiltering');
                let siteLabelSelection = uni.getStorageSync('siteLabelSelection');
                let getMemberQueryPreferenceDto = {
                    ...siteFiltering,
                    ...siteLabelSelection
                }
                console.log("getMemberQueryPreferenceDto==>siteLabelSelection", getMemberQueryPreferenceDto)

                // let getMemberQueryPreferenceDto = uni.getStorageSync('siteLabelSelection') 
                
                console.log("indexSearchConditionData", this.indexSearchConditionData)


                this.indexSearchConditionData.isFeatured[0].isShow = getMemberQueryPreferenceDto.isFeatured
                
                this.indexSearchConditionData.gunType.map(item=>{
                    if(getMemberQueryPreferenceDto.gunType){
                        if(getMemberQueryPreferenceDto.gunType.includes(item.value)){
                            item.isShow = true
                        }
                    }
                })
                this.indexSearchConditionData.serviceFacilities.map(item=>{
                    if(getMemberQueryPreferenceDto.serviceFacilities){
                        if(getMemberQueryPreferenceDto.serviceFacilities.includes(item.value)){
                            item.isShow = true
                        }
                    }
                })
            },
            
            //确定偏好
			enterPreference() {
				//传递出去给接口用
				this.memberQueryPreferenceDto = {
                    isFeatured: this.indexSearchConditionData.isFeatured[0].isShow ? true : false,
                    serviceFacilities: this.indexSearchConditionData.serviceFacilities.filter(s=> s.isShow).map(v=> v.value),
                    gunType: this.indexSearchConditionData.gunType.filter(s=> s.isShow).map(v=> v.value),
				}
				console.log(this.memberQueryPreferenceDto,'memberQueryPreferenceDto.....')

				uni.setStorageSync('siteLabelSelection', this.memberQueryPreferenceDto);

                let siteFiltering = uni.getStorageSync('siteFiltering');
                let siteFilteringObject = {
                    ...siteFiltering,
                    isFeatured: this.memberQueryPreferenceDto.isFeatured,
                    serviceFacilities: this.memberQueryPreferenceDto.serviceFacilities,
                    gunType: this.memberQueryPreferenceDto.gunType,
                }
                uni.setStorageSync('siteFiltering', siteFilteringObject);


                this.$emit("backHome");  //backHome父组件的方法,e要传递的参数
			},

            checkTag1(item) {
				console.log(item)
				item.isShow = !item.isShow;
                this.enterPreference()
			},
            checkTag2(item) {
				console.log(item)
				item.isShow = !item.isShow;
                this.enterPreference()
			},
            checkTag3(item) {
				console.log(item)
				item.isShow = !item.isShow;
                this.enterPreference()
			},
            // 获取站点列表筛选条件
			getIndexSearchCondition() {
                indexSearchCondition().then(res=>{
                    console.log(res,'筛选条件,部分几个...')
                    if(res.code==0){
                        let datas = res.data[0]
                        const isFeatured = datas.isFeatured.map(item => {
                            return {
                                ...item,
                                isShow: false,
                            }
                        })
                        const serviceFacilities = datas.serviceFacilities.map(item => {
                            return {
                                ...item,
                                isShow: false,
                            }
                        })
                        const gunType = datas.gunType.map(item => {
                            return {
                                ...item,
                                isShow: false,
                            }
                        })
                        

                        this.indexSearchConditionData = {
                            isFeatured: isFeatured,
                            serviceFacilities: serviceFacilities,
                            gunType: gunType,
                        }
                        console.log(this.indexSearchConditionData,'mmmmmmmm....')
                        
                        this.initDataBase()
                    }
                })
            },
        },
        created() {
            this.getIndexSearchCondition()
		},
	};
</script>
<style lang="less" scoped>
    @import "../../commin/commin.less";

    //筛选标签样式
    .site_tag{
        width: 100%;
        display: flex;
        overflow-x: scroll;
        .tag_item{
            height: 56rpx;
            line-height: 56rpx;
            background: #F5F7FA;
            border-radius: 28rpx 28rpx 28rpx 28rpx;
            margin-right: 16rpx;
            .v_item{
                width: 180rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                .v_icon{
                    width: 30rpx;
                    height: 36rpx;
                }
                .v_text{
                    font-size: 28rpx;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #909399;
                }
            }
        }
        //选中
        .tag_item_sel{
            background: var(--textColor);
            .v_item{
                .v_text{
                    color: #FFFFFF;
                }
            }
        }
    }



</style>
